<template>
    <el-header style="text-align: right; font-size: 12px">
        <div class="btn-arrow">
            <el-button type="primary" @click="handleIsCollapse" icon="el-icon-s-operation" size="mini"></el-button>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <!-- <el-breadcrumb-item v-for="item in temporaryMenu" :key="item.path"> <span @click="handlerPath(item.path)">{{item.label}}</span></el-breadcrumb-item> -->
                <el-breadcrumb-item v-for="item in temporaryMenu" :key="item.path">{{item.label}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>查看</el-dropdown-item>
            <el-dropdown-item @click.native="handleCancel">注销</el-dropdown-item>
            </el-dropdown-menu>
            <span>{{person.AdminName}}</span>
        </el-dropdown>
    </el-header>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
export default {
    name:'Header',
    computed:{
        ...mapState('Menu',['Menu','isCollapse'],'HeaderTag',['temporaryMenu']),
        ...mapState('HeaderTag',['temporaryMenu']),
        ...mapState('Public',['person'])
    },
    methods: {
        ...mapMutations('Menu',['EidtIsCollapse','EidtDrawer']),
        ...mapMutations('Public',['EidtpublicWidth','EidtSettings_tabPosition','EidtAssesbly','EidtManage']),
        handleIsCollapse()
        {
            if(document.body.clientWidth > 540)
            {
                this.EidtIsCollapse()
            }
            if(document.body.clientWidth <= 540)
            {
                this.$bus.$emit('drawer',true)
            }
        },
        handleCancel()
        {
            this.$session.set("user-pwd-key",undefined)
            this.$router.push('/login')
        }
    },
    watch:{
        screenWidth(val)
        {
            // 为了避免频繁触发resize函数导致页面卡顿，使用定时器
            if(!this.timer)
            {
                // 一旦监听到的screenWidth值改变，就将其重新赋给data里的screenWidth
                this.screenWidth = val
                this.timer = true
                let that = this
                //这里修改所有的PC移动端数据变换，可以考虑放到APP中
                setTimeout(function()
                {
                    that.EidtpublicWidth(that.screenWidth)
                    if (that.screenWidth <= 540) {
                        that.EidtSettings_tabPosition('top')
                    } else {
                        that.$bus.$emit('drawer',false)
                        that.EidtSettings_tabPosition('left')
                    }
                    that.EidtAssesbly()
                    that.EidtManage()
                    // console.log(that.screenWidth)
                    that.timer = false
                },500)
            }
        }
    },
    mounted() {
        //实现移动Mneu问题        
        //获取屏幕尺寸
        this.screenWidth = document.body.clientWidth
        window.onresize = () => {
            //屏幕尺寸变化
            return (() => {
                this.screenWidth = document.body.clientWidth
            })()
        }
    },
    data() 
    {
        return {
            screenWidth: null
        }
    },
}
</script>

<style lang="less" scoped>
    .el-header 
    {
        border-bottom: 1px solid #e7e7e7;
        color: #333;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 10px;
        .btn-arrow
        {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .el-breadcrumb
        {
            margin-left: 10px;
        }
    }

    @media all and (max-width: 540px)
    {
        .el-breadcrumb
        {
            display: none;
        }
    }
</style>